<template>
    <div class="container">
        <!-- 头部 -->
	    <head-message></head-message>
        <!-- 头像 -->
        <div class="avatar-area">
            <div class="avatar-content">
                <div class="avatar-img" >
                    <img v-if="!userInfo.salesManNickName" src="../assets/login2.png" alt="">
                    <img v-if="userInfo.salesManNickName&&userInfo.salesManSex==1" src="../assets/men.png" alt="">
                    <img v-if="userInfo.salesManNickName&&userInfo.salesManSex==0" src="../assets/women.png" alt="">
                </div>
                <div class="avatar-btn" v-if="!userInfo.salesManNickName">
                    <div class="avatar-login" @click="toLogin">登录</div>
                    <div class="avatar-resigion" @click="resigion">注册</div>
                </div>
                <div class="user-meaage" v-else>
                    <div class="welcome">
                        欢迎您，{{userInfo.salesManNickName}}
                    </div>
                    <div class="user-num">
                        <!-- 等级 -->
                        <div class="userleve" v-if="userInfo.salesManIdentity == 0">
                            等级：兼职业务员
                        </div>
                        <div class="userleve" v-if="userInfo.salesManIdentity == 1">
                            等级：业务员
                        </div>
                        <div class="userleve" v-if="userInfo.salesManIdentity == 2">
                            等级：主管
                        </div>
                        <div class="userleve" v-if="userInfo.salesManIdentity == 3">
                            等级：资深主管
                        </div>
                        <div class="userleve" v-if="userInfo.salesManIdentity == 4">
                            等级：经理
                        </div>
                        <!-- 余额 -->
                        <div class="money-num">当前可用余额：{{ userInfo.salesManBalance }}</div>
                    </div>
                </div>
                <div class="sure-wrap">
                    <div class="sure" @click="toSure" v-if="userInfo.salesManNickName&&userInfo.realNameAuthentication!=1">
                        未实名认证
                    </div>
                </div>
                <div class="sure-wrap" v-if="userInfo.realNameAuthentication&&userInfo.realNameAuthentication==1">
                    <div class="sure on">
                        已认证
                    </div>
                    <div class="sure" @click="toWithdraw">提现</div>
                </div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <div class="nav-list">
                <div class="nav-item" @click="toPath(item.path,item.id)" v-for="item in navList" :key="item.id">
                    <div class="pic">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="wrap">
                        <div class="text">{{item.name}}</div>
                        <div class="icon">
                            <img src="../../public/static/icon-right.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HeadMessage from '@/components/head-message/index.vue'
import {mapActions,mapState} from "vuex"
export default {
    components:{
		HeadMessage
	},
    data(){
        return{
            navList:[
                {name:"我的资料",img:'/static/userinfo.png',id:0,path:"/userInfo"},
                {name:"提现记录",img:'/static/widthdraw.png',id:1,path:"/withdrawlist"},
                {name:"我的关注",img:'/static/follow.png',id:2,path:"/follow"},
                {name:"安全退出",img:'/static/turnout.png',id:3},
            ]
        }
    },
    computed:{
        ...mapState(["userInfo"])
    },
    methods:{
        ...mapActions(["SaveUserInfo","SaveUsertoken","out_login"]),
        toPath(path,id){
            console.log(id)
            const{userInfo}=this
            if(id==3&&userInfo.salesManSex){
                this.out_login()
                var token=""
                this.SaveUsertoken(token)
                this.$toast.success("退出成功");
                this.$router.push({path:"/home"})
            }else{
                if(Object.keys(userInfo).length<1){
                    this.$toast.fail("请先登录");
                }else{
                    this.$router.push({path})
                }
            }
        },
        // 去登陆
        toLogin(){
            this.$router.push({path:"/login"})
        },
        // 去注册
        resigion(){
            this.$router.push({path:"/resigion"})
        },
        // 去实名认证
        toSure(){
            this.$router.push({path:"/sure"})
        },
        // 去体现
        toWithdraw(){
            if(this.userInfo.realNameAuthentication!=1){
                this.$toast("请先实名认证");
            }else{
                this.$router.push({path:"/withdrawform"})
            }
           
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    background-color: #F9F9FA;
}
// 头像区域
.avatar-area{
    height: 4rem;
    background-color: #F07C00;
    .avatar-img{
        padding-top: 0.5rem;
        width:1.3rem ;
        height: 1.1rem;
        margin: 0 auto;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
.avatar-btn{
    display: flex;
    font-size: 0.28rem;
    margin: 0 auto;
    color: #fff;
    justify-content: center;
    padding-top: 0.6rem;
    .avatar-login{
        width: 1.4rem;
        height: 0.6rem;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.3rem;
    }
    .avatar-resigion{
        width: 1.4rem;
        height: 0.6rem;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
// 用户信息
.user-meaage{
    margin-bottom: 0.27rem;
    .welcome{
        font-size: 0.28rem;
        color: #fff;
        display: flex;
        justify-content: center;
        margin-top: 0.3rem;
    }
    .user-num{
        display: flex;
        font-size: 0.28rem;
        color: #fff;
        justify-content: center;
        margin-top: 0.2rem;
        div{
            margin-right: 0.2rem;
        }
    }
}
.sure{
    width: 1.7rem;
    height: 0.45rem;
    color: #fff;
    background-color: #FF0000;
    font-size: 0.2rem;
    border-radius: 5px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.2rem;
}
.sure.on{
    background-color: #fff;
    color: #f08200;
}
.sure-wrap{
    display: flex;
    justify-content: center;
}
// 导航
.nav-list{
    padding: 0 0.35rem;
    background-color: #fff;
}
.nav-item{
    display: flex;
    align-items: center;
    line-height: 0.9rem;
    border-bottom: 1px solid #ddd;
    .pic{
        width: 0.45rem;
        height: 0.45rem;
        display: flex;
        align-items: center;
        margin-right: 0.3rem;
        img{
            width: 100%;
            height: auto;
        }
    }
    .text{
        font-size: 0.28rem;
    }
    .wrap{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon{
        display: flex;
        align-items: center;
    }
}

</style>